<template>
  <div :class="[bem.b(), '']" :style="rowStyle">
    <div
      v-for="column in heads"
      :key="column.label"
      :class="bem.e('cell')"
    >
      {{ column.label }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, inject, type CSSProperties } from 'vue';
import { tableContextInjectKey } from '../table/table';
import { createNamespace } from '../libs/bem';

const bem = createNamespace('extra-table-head');

const tableContext = inject(tableContextInjectKey);

const heads = computed(() => {
  return tableContext?.columns.value.filter((col) => !col.extra);
});

const rowStyle = computed(() => {
  const gridColumns =
    tableContext?.gridTemplateColumnsStyle.value || '';

  const style: CSSProperties = {
    display: 'grid',
    gridTemplateColumns: gridColumns,
  };

  return style;
});
</script>

<style scoped></style>
